<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>环图</title>
  <link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
  <canvas id="mountNode" style="position: relative;">
  </canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
  const data = [
    { x: '1', y: 85 }
  ];
  const chart = new F2.Chart({
    id: 'mountNode',
    width: window.innerWidth,
    height: window.innerWidth * 0.64,
    pixelRatio: window.devicePixelRatio
  });
  chart.source(data, {
    y: {
      max: 100,
      min: 0
    }
  });
  chart.axis(false);
  chart.coord('polar', {
    transposed: true,
    innerRadius: 0.8
  });
  chart.guide().arc({
    start: [ 0, 0 ],
    end: [ 1, 99.98 ],
    top: false,
    style: {
      lineWidth: 20,
      stroke: '#ccc'
    }
  });
  chart.guide().text({
    position: [ '50%', '50%' ],
    content: '85%',
    style: {
      fontSize: 45,
      fill: '#1890FF'
    }
  })
  chart.interval()
    .position('x*y')
    .size(20)
    .animate({
      appear: {
        duration: 1500
      }
    });
  chart.render();
</script>
</body>
</html>
